<template>
	<view class="container">
		<view class="bg-white padding-sm">
			<view class="flex justify-start align-center">
				<view class="flex justify-start align-center bg-F4F4F4 padding-left round f-grow1"
					style="height: 70rpx;width: 460rpx;">
					<image :src="baseUrl + '/static/images/search_for.png'" mode="" style="width: 25rpx;height: 25rpx;">
					</image>
					<input type="text" @input='search' v-model="name" value="" class="text-13 f-grow1 padding-left-sm"
						placeholder="商品名称" />
				</view>
			</view>
			<scroll-view scroll-x class="bg-white nav text-666" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="TabCur==0?'color cur text-bold':''" @tap="tabSelect" :data-id="0">
					首页
				</view>
				<view class="cu-item" :class="item.id==TabCur?'color cur text-bold':''" v-for="(item,index) in typeList"
					:key="index" @tap="tabSelect" :data-id="item.id" :data-index='index'>
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		
		<view class="margin-sm bg-white radius10 padding-bottom" v-for='(item,index) in list'>
			<view class="flex justify-start padding-sm ">
				<!-- 	<view class="text-11 zIndex flex justify-center align-center text-white"
					:style="'background-image: url('+ baseUrl + '/static/images/shop_bg2.png);background-size: 100% 100%;width: 70rpx;height: 36rpx;position: absolute;left: 20rpx;top: 20rpx'">
					团购
				</view>
				<view class="text-13 text-white flex justify-center align-center"
					style="position: absolute;bottom: 20rpx;left: 20rpx;width: 200rpx;height: 46rpx;background: rgba(0,0,0,.5);z-index: 1;">
					已结束
				</view> -->
				<image v-if='!item.publishStatus' :src="item.pic" mode=""  class="radius5" style="width: 200rpx;min-width: 200rpx;height: 200rpx;">
				<image v-else :src="item.pic" mode="" @click="toPage('/filePage/pages/goods-detail/goods-detail?id=' +item.id)" class="radius5" style="width: 200rpx;min-width: 200rpx;height: 200rpx;">
				</image>
				<view class="margin-left-sm flex justify-between flex-direction" style="width: calc(100% - 200rpx);">
					<view class="text-15 text-333 text-cut-2" style="width: 100%;">
						{{item.name}}

					</view>
					<view class="flex justify-between">
						<view class="flex">
							<block v-if='item.auditStatus==0'>
								<view class="color">未审核 </view>
							</block>
							<block v-if='item.auditStatus==1'>
								<view class="color">通过 </view>
							</block>
							<block v-if='item.auditStatus==2'>
								<view class="color">不通过 </view>
							</block>
							
							<view class="color margin-left">{{item.publishStatus==1?'已上架':'未上架'}}</view>
						</view>
						<block v-if='isShow'>
							<image
							  @click="checkType(false, item)"
							  v-if="item.checked"
							  :src="baseUrl + '/static/selected.png'"
							  mode=""
							  style="width: 36rpx; height: 36rpx; min-width: 36rpx"
							></image>
							<image
							  @click="checkType(true, item)"
							  v-else
							  :src="baseUrl + '/static/unselected.png'"
							  mode=""
							  style="width: 36rpx; height: 36rpx; min-width: 36rpx"
							></image>
												
						</block>
					
						
					</view>

					<view class="flex justify-between align-center">
						<view class="flex justify-start align-center">
							<view class="text-17 color text-bold">
								¥{{ parseFloat(item.price/ 100).toFixed(2) }}
							</view>
							<view class="text-sm text-999 text-delete margin-left-xs">
								¥{{ parseFloat(item.originalPrice/ 100).toFixed(2)}}
							</view>
						</view>
						<view class="color text-sm">
							库存 {{item.stock}} 
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-end align-center">
				<button @click="upProduct(item)"
					class="text-sm text-white round btn text-F94000 margin-right bg-white">
					{{item.publishStatus?'下架':'上架'}}
					</button>
				<!-- <button class="text-sm text-white round btn text-999 margin-right bg-white">结束</button> -->
				<button
					@click="toPage('/filePage/pages/commodity/commodity?item='+item.id+'&id='+shopId+'&type='+shopType)"
					class="text-sm text-white round btn text-999 margin-right bg-white">编辑</button>

				<button @click="deleteById(item.id)"
					class="text-sm text-white round btn text-F94000 margin-right bg-white">删除</button>
			</view>
		</view>
		
		<button @click="toPage('/filePage/pages/productAdd/productAdd?type='+shopType+'&id='+shopId)"
			class="padding bg-linear-FF416C text-white round footer flex justify-center align-center">
			<image :src="baseUrl + '/static/add_goods.png'" mode="" class="margin-right-xs"></image>
			新增商品
		</button>
		<uni-load-more :status="loading" />
	</view>
</template>

<script>
	import BetterPull from '@/common/util/BetterPull'
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = 'loading';

					const obj = {
						pageNum: page,
						pageSize: 10,
						shopType: this.shopType,
						name: this.name,
						firstCategoryId: this.TabCur === 0 ? '' : this.TabCur,
						shopId: this.shopId
					}


					const [err, res] = await this.$get(this.$api.listByProductQueryParamManage,
						obj)
					if (res) {
					     for(let i in res.data.list){
							 this.$set(res.data.list[i],'checked',false) 
						 }
						 var data = res.data.list
						 console.log(data)
						done(data);
						if (data.length < 10) {
							this.loading = 'noMore';
						} else {
							this.loading = 'more';
						}

					}
					if (err) {
						done([]);
						this.loading = 'noMore';
					}
				}
			})
		],


		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				baseUrl: this.$config.baseUrl,
				typeList: [],
				loading: 'more',
				shopType: '',
				firstCategoryId: '',
				name: '',
				shopId: '',
				isShow:false,
				radio:'',
				productInfo:{}
			};
		},
		onLoad(options) {
			console.log(options)
			this.shopType = options.type
			if (options.type == 1) {
				this.shopId = uni.getStorageSync("shopIdApply");
			}
			if (options.type == 2) {
				this.shopId = uni.getStorageSync("shopServiceIdApply");
			}
			if(options.add){
				this.isShow = true
			}
			this.getProducType()

		},
		methods: {
			async upProduct(item){
				const data ={id:item.id,publishStatus:item.publishStatus?0:1}
				const [err,rs] = await this.$get(this.$api.updateStatusProduct,data)
				if(rs){
					if(rs.code==200){
						if(item.publishStatus){
							item.publishStatus = 0
							uni.showToast({
								title:'商品已下架',
								icon:'none'
							})
						}else{
							item.publishStatus = 1
							uni.showToast({
								title:'商品已上架',
								icon:'none'
							})
						}
						
					}
					
				}
			},
			
			toPage(url) {
				this.$util.openNewPage(url)
			},
			tabSelect(e) {
				console.log(e)
				console.log(e.currentTarget.dataset.id)
				this.TabCur = e.currentTarget.dataset.id;
				console.log(this.TabCur)
				this.scrollLeft = (e.currentTarget.dataset.index - 1) * 60
				this.list = []
				this.Refresh()
			},
			search() {
				this.list = []
				this.Refresh()
			},

			async getProducType() {
				const data = {
					type: 1
				}
				const [err, rs] = await this.$get(this.$api.home_categoryTreeList, data)
				if (rs) {
					this.typeList = rs.data
				}
			},
			checkType(status, item){
				   if(status){
					   for(let i in this.list){
						 this.list[i].checked = false
					 }
					 uni.setStorageSync('productInfo',item);
					 uni.navigateBack({
					 	
					 })
				 }
				 item.checked = status
				
			},
			RadioChange(e) {
				console.log(e)
			    this.radio = e.detail.value;
				// uni.setStorageSync('shopIdApply', rs.data.shopIdApply);
				
			},
			deleteById(id) {
				const that = this
				uni.showModal({
					content: '你确定删除该商品吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$get(that.$api.productDelete, {
								id
							}).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									that.Refresh()
								}
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	radio-group{
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	.tabs {
		padding: 4rpx;

		.tab {
			width: 234rpx;
			padding: 16rpx;
		}

		.on {
			background: #fff;
			color: #ED7200;
			font-weight: bold;
		}
	}

	.btn {
		min-width: 148rpx;
		width: 148rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border: 1rpx solid;
		// background: linear-gradient(to right,#FF416C,#FF4B2B);
	}

	.c-nav {
		view {
			border-bottom: 6rpx solid #fff;
		}

		.on {
			color: #221815;
			font-weight: bold;
			border-bottom: 6rpx solid #ED7200;
		}
	}

	.footer {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 98rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>
